<template>
  <div class="public">
    <!-- 头部导航 -->
    <div class="header">
      <!-- <div class="left iconfont icon-geren" @click="showPopup"></div> -->
      <router-link class="left iconfont icon-geren"  to="/userinfo"></router-link>
        
      <div class="center">MUSIC-VUE</div>
      <!-- <div class="right iconfont icon-sousuo" ></div> -->
      <router-link tag="div" class="right iconfont icon-sousuo" to="/search"></router-link>

    </div>

    <!-- 导航按钮 -->
    <div class="navs">
      <router-link tag="div" to="/recommend" class="item">
        <span>推荐</span>
      </router-link>
      <router-link tag="div" to="/rank" class="item">
        <span>排行榜</span>
      </router-link>
      <router-link tag="div" to="/singer" class="item">
        <span>歌手</span>
      </router-link>
    </div>

     

   
  </div>
</template>

<script>

export default {
  data() {
    return {
   
    };
  },
  methods: {
    

 
  },
};
</script>

<style lang="less">
.public {
  // 头部样式
  .header {
    background-color: #d44439;
    color: #fff;
    height: 39px;
    line-height: 39px;
    display: flex;
    text-align: center;
     .left{
       color: #fff;
     }
    .left,
    .right {
      flex: 0 0 40px;
      font-size: 18px;
    }
    .center {
      flex: 1;
    }
  }

  .navs {
    height: 40px;
    line-height: 40px;
    display: flex;
    background-color: #d44439;
    color: #fff;
    .item {
      flex: 1;
      text-align: center;
      font-size: 14px;
      span {
        display: inline-block;
        height: 21px;
        line-height: 21px;
        border-bottom: 1px solid transparent;
      }
      &.router-link-active span {
        border-color: #fff;
        font-weight: bold;
      }
    }
  }

 
}
</style>